<template>
    <div class="manage">
        <div class="manage-header">
            <el-form :model="form" :inline="true" label-width="90px">
                <el-form-item label="配置项/描述">
                    <el-input v-model="searchForm.name" clearable size="small" placeholder="支持配置项或描述搜索"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="add" size="small">新增配置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="common-table">
            <el-table stripe height="90%" :data="tableData">
                <el-table-column prop="key" label="配置项"></el-table-column>
                <el-table-column prop="label" label="配置项描述"></el-table-column>

                <el-table-column label="配置值" width="480">
                    <template slot-scope="scope">
                        <div class="comment">{{ scope.row.value }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handleEdit(scope.row)" size="mini">编辑</el-button>
                        <el-button v-if="scope.row.id !== 1" @click="handleDelete(scope.row)" type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pager">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change = "pageChanged"
                    :page-size="pageData.limit"
                    :current-page="pageData.page"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog
            :title="typeof form.id === 'number' ? '编辑配置' : '新增配置'"
            :visible.sync="dialogVisible"
            @close="onClosed()"
            width="1200">
            <el-form ref="form" :model="form" :rules="rules" :inline="true"  label-width="100px">
                <el-form-item label="配置项" prop="key">
                    <el-input v-model="form.key" size="small" style="width: 200px" placeholder="请输入配置项"></el-input>
                </el-form-item>

                <el-form-item label="配置项描述" prop="label">
                    <el-input v-model="form.label" size="small" style="width: 300px" placeholder="请输入配置项描述"></el-input>
                </el-form-item>

                <el-form-item label="配置值" prop="value">
                    <el-input type="textarea" size="small" style="width: 510px" :rows="3" v-model="form.value" placeholder="请输入配置值"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSetting">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import { getSettingList, addSetting, editSetting, deleteSetting } from "@/api/setting"

export default {
    data() {
        return {
            dialogVisible: false,
            searchForm: {
                name: ''
            },
            form: {
                id: '',
                key: '',
                label: '',
                value: '',
            },
            tableData: [],
            total: 0,
            pageData: {
                page: 1,
                limit: 10
            },
            rules: {
                key: [
                    {required: true, message: '请输入配置项', trigger: 'blur'},
                    { max: 32, message: '配置项最多 32 个字符', trigger: 'blur' }
                ],
                label: [
                    { max: 32, message: '配置项描述最多 32 个字符', trigger: 'blur' }
                ],
                value: [
                    {required: true, message: '请输入配置值', trigger: 'blur'}
                ]
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            getSettingList({params: {...this.pageData, ...this.searchForm}}).then(({ data }) => {
                if (typeof data.data !== 'string') {
                    this.tableData = data.data
                    this.total = data.meta.total || 0
                }
            })
        },
        add() {
            this.dialogVisible = true
            this.form.id = ''
        },
        handleEdit(row) {
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true
        },
        handleDelete(row) {
            this.$confirm('确认要删除该配置吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteSetting(row.id).then(({ data }) => {
                    if (data.code === 200) {
                        this.$message.success(data.data)
                    } else {
                        this.$message.error(data.data)
                    }
                    this.getList()
                })
            }).catch(() => {

            })
        },
        handleSetting() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.id) {
                        editSetting(this.form.id, this.form).then(({ data }) => {
                            if (data.code === 200) {
                                this.$message.success('更新成功')
                                this.$store.commit('setConfig', data.data.config)
                            } else {
                                this.$message.error(data.data)
                            }
                        })
                    } else {
                        addSetting(this.form).then(({ data }) => {
                            if (data.code === 201) {
                                this.$message.success(data.data)
                            } else {
                                this.$message.error(data.data)
                            }
                        })
                    }

                    this.$refs.form.resetFields()
                    this.getList()
                    this.dialogVisible = false
                }
            })
        },
        pageChanged(val) {
            this.pageData.page = val
            this.getList()
        },
        onSubmit() {
            this.pageData.page = 1
            this.getList()
        },
        // 对话框关闭的回调
        onClosed() {
            this.$refs.form.resetFields()
        }
    }
}
</script>

<style lang="less" scoped>
.manage {
    height: 90%;

    .manage-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-form {
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px 0 0 10px;
            margin-bottom: 15px;
            width: 100%;
        }
    }

    .common-table {
        height: calc(100% - 32px);
        position: relative;

        .el-table::before {
            height: 0;
        }

        /deep/.el-table__header-wrapper {
            .cell {
                font-weight: normal;
                color: #666666;
            }
        }

        /deep/.el-table__body-wrapper {
            .cell {
                font-weight: normal;
                color: #333333;
                font-size: 12px;
            }
        }

        .comment {
            border: 1px solid #efefef;
            background: #ffffff;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            padding: 0 5px;
            font-size: 12px;
            color: #333333;
        }

        .pager {
            position: absolute;
            bottom: 0;
            right: 20px;
        }
    }
}
</style>
